第十七天--註冊帳號功能

2023 iThome 鐵人賽

DAY 17

自我挑戰組

基礎前端+後端網站分享之留言板製作系列第 17 篇

15th鐵人賽

aliecele

2023-10-01 09:38:28

239 瀏覽

分享至

今天來撰寫註冊帳號。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
    <title>註冊留言板</title>
</head>

<body>
    <ul class="nav nav-tabs justify-content-center">
        <li class="nav-item">
            <a class="nav-link" aria-current="page" href="Home.php">留言板</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="login.php">登入</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" href="register.php">註冊</a>
        </li>
    </ul>

    <div class="mt-5">
        <h1 class="mt-5 text-center">註冊</h1>

        <div class="form p-3">
            <form action="../php/create_user.php" method="POST">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text text-light bg-dark">帳號: </span>
                    </div>
                    <input class="form-control" type="text" name="user_name" required="required" value="" placeholder="輸入帳號">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text text-light bg-dark">密碼: </span>
                    </div>
                    <input class="form-control" type="password" name="password" required="required" value="" placeholder="輸入密碼">
                </div>

                <input type="hidden" name="id" value="">
                <input type="submit" class="btn btn-dark" value="註冊">


            </form>

        </div>


    </div>
</body>

</html>

先在php檔案中新增php檔(create_user.php)，作為註冊帳號的功能。

Form的action要連結到create_user.php去，如果按照我的檔案位置放，會如程式碼的寫法。../php/create_user.php意思是上個資料夾中的php資料夾中的create_user.php。
使用Post傳遞，Get會在網址上洩漏帳號，Post才能保護用戶安全。

create_user.php程式碼
程式碼

<?php

include("datatable.php");
$user_name = $_POST["user_name"];
$password = $_POST["password"];
$statement = register_account($user_name, $password);
echo var_dump($statement);
header('Location:/30days/message_board/screen/login.php');

用法:
include("檔案路徑及名稱");

create_user.php需要引用到datatable.php的函式，寫include("datatable.php");，為了程式碼整潔，我不打算寫create_user.php中。
include("datatable.php")會把文件引入到create_user.php，等同於

<?php

session_start();
function dbConnect()//連接資料庫
{
    $db_type = 'mysql';
    $db_host = 'localhost';
    $db_name = 'messageboard_ithome';
    $db_user = 'root';
    $db_password = '';
    $dbconnect = "mysql:host=" . $db_host . ";dbname=" . $db_name;
    $db = new PDO($dbconnect, $db_user, $db_password);
    $db->query("SET NAMES UTF8");
    return $db;
}
function register_account($user_name, $password) //註冊帳號
{
    $db = dbConnect();
    $statement = $db->prepare("INSERT INTO account(user_name, password) VALUES(?,?)");
    $statement->execute([$user_name, $password]);
    return $statement;
}
$user_name = $_POST["user_name"];
$password = $_POST["password"];
$statement = register_account($user_name, $password);
header('Location:/30days/message_board/screen/login.php');

，並繼承了 include 所在行的變數範圍，在這register_account為與資料庫連動的函式。

由於datatable.php和create_user.php，所以只需要填寫datatable.php當路徑。

datatable.php程式碼

<?php

function dbConnect()//連接資料庫
{
    $db_type = 'mysql';
    $db_host = 'localhost';
    $db_name = 'messageboard_ithome';
    $db_user = 'root';
    $db_password = '';
    $dbconnect = "mysql:host=" . $db_host . ";dbname=" . $db_name;
    $db = new PDO($dbconnect, $db_user, $db_password);
    $db->query("SET NAMES UTF8");
    return $db;
}
function register_account($user_name, $password)//註冊帳號
{
    $db = dbConnect();
    $statement = $db->prepare("INSERT INTO account(user_name, password) VALUES(?,?)");
    $statement->execute([$user_name, $password]);
    // return $statement;
}
?>

function register_account($user_name, $password){~~}//註冊帳號
撰寫方式和寫C的函式(function)相同，函式名稱為register_account。
$db = dbConnect();
先連接資料庫，才能使用資料庫。
$statement = $db->prepare("INSERT INTO account(user_name, password) VALUES(?,?)");
INSERT INTO~ VALUES(?,?)這段是mysql的插入語法，在account資料庫的欄位加入數值。
$db->prepare準備Mysql語法到資料庫使用，等待數值填入與指令。
execute([$user_name, $password]);
Execute執行MYSQL語法
return $statement;沒用，我不小心多寫。